<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="author" content="Cai Heng"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="../css/mystyle.css"/>
    <link rel="stylesheet" href="../css/form.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css"/>
    <link rel="stylesheet" href="../css/ms.css"/>
    <link rel="stylesheet" href="../css/gs.css"/>
    <title>供应材料</title>
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.min.js"></script>
    <script src="../js/respond.min.js"></script>
    <![endif]-->
    <script src="../js/vue/vue.js"></script>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function() {
            new Vue({
                el:"#app",
                data:{
                    title:"材料供应",
                    detail:"",
                    sidebar:[
                        {
                            text:"花岗岩",
                            info:[
                                {url:'../images/cailiao/1_02.png',name:'新土耳其灰3',price:5000},
                                {},
                                {}
                            ]},
                        {text:"大理石"},
                        {text:"板岩"},
                        {text:"砂岩"},
                        {text:"人造石材"},
                        {text:"石灰石"},
                        {text:"玄武石"},
                        {text:"成品石材"}
                    ],
                    show:true
                },
                methods:{
                    ss:function(event){
                        var $this=$(event.currentTarget);
                        $this.addClass('active').siblings().removeClass("active");
                        this.detail=$this.text();
                    }
                }
            });
            var $a=$('.xuhao>a');
            $a.click(function(){
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
            });
            $a.eq(7).click(function(){
                        for(var i=0;i<7;i++){
                            var num=$a.eq(i).text();
                            num++;
                            $a.eq(i).text(num);
                            if(i==0){$a.eq(i).html("&lt;");}
                            else if(i==1){
                                $a.eq(i-1).html("首页");
                                $a.eq(i).html("&lt;");
                            }
                        }
                    }
            );
            $a.eq(1).click(function(){
                        if($a.eq(2).text()==3){
                            $a.eq(0).text('1');
                            $a.eq(1).text('2');
                            return
                        }
                        for(var i=2;i<7;i++){
                            var num=$a.eq(i).text();
                            num--;
                            $a.eq(i).text(num);
                        }
                    }
            );
            $a.eq(0).click(function() {
                for (var i = 0; i < 7; i++) {
                    var b=i+1;
                    $a.eq(i).text(b);}
            });
            $a.eq(8).click(function(){
                for(var i=2;i<7;i++){
                    var num=parseInt($a.eq(i).text());
                    num+=5;
                    $a.eq(i).text(num);
                    $a.eq(0).text('首页');
                    $a.eq(1).text('<');
                }
            });
        });

    </script>
</head>
<body>
<!--表单-->
<div class="formBg hidden">
    <!-- 登录-->
    <form action="" class="form hidden">
        <div class="close-box">
            <img src="../images/CLOSE.png" class="close" alt=""/>
        </div>
        <img src="../images/logo.png" class="form-logo" alt=""/>
        <div class="form-div">
            <hr/>&nbsp;
            使用帐号密码登录&nbsp;
            <hr/>
        </div>
        <div class="form-div">
            <label for="user">帐号</label>
            <input type="text" id="user" name="name" placeholder="请输入帐号"/>
        </div>
        <div class="form-div">
            <label for="psd">密码啊</label>
            <input type="text" id="psd" name="psd" placeholder="请输入密码"/>
        </div>
        <div class="form-div">
            <input type="submit" id="submit" class="submit" value="登录"/>
            <span class="register">注册</span>
            <span class="forget">忘记密码</span>
        </div>
    </form>
    <!-- 注册-->
    <form action="" class="form hidden">
        <div class="close-box">
            <img src="../images/CLOSE.png" class="close" alt=""/>
        </div>
        <img src="../images/logo.png" class="form-logo" alt=""/>
        <div class="form-div">
            <hr/>&nbsp;
            新用户注册&nbsp;
            <hr/>
        </div>
        <div class="form-div">
            <label for="tel">手机号</label>
            <input type="text" id="tel" name="tel" placeholder="请输入手机号"/>
        </div>
        <div class="form-div form-code">
            <label for="code">验证码</label>
            <input type="text" id="code" name="code" placeholder="请输入验证码"/>
            <span class="getcode">发送验证码</span>
        </div>
        <div class="form-div">
            <label for="setpsd">密码</label>
            <input type="text" id="setpsd" name="setpsd" placeholder="请设置密码"/>
        </div>
        <div class="form-div">
            <input type="submit" id="submit-reg" class="submit" value="注册"/>
            <span class="regalert"> 点击「注册」按钮，即代表你同意 <span class="var">《注册声明》 《版权声明》</span></span>
        </div>
    </form>
    <!-- 忘记密码-->
    <form action="" class="form hidden">
        <div class="close-box">
            <img src="../images/CLOSE.png" class="close" alt=""/>
        </div>
        <img src="../images/logo.png" class="form-logo" alt=""/>
        <div class="form-div">
            <hr/>&nbsp;
            忘记密码&nbsp;
            <hr/>
        </div>
        <div class="form-div">
            <label for="tel-2">手机号</label>
            <input type="text" id="tel-2" name="tel-2" placeholder="请输入手机号"/>
        </div>
        <div class="form-div form-code">
            <label for="code-2">验证码</label>
            <input type="text" id="code-2" name="code-2" placeholder="请输入验证码"/>
            <span class="getcode">发送验证码</span>
        </div>
        <div class="form-div">
            <label for="newpsd">密码</label>
            <input type="text" id="newpsd" name="newpsd" placeholder="请输入新密码"/>
        </div>
        <div class="form-div">
            <input type="submit" id="ok" class="submit" value="确定"/>
        </div>
    </form>
    <!-- 预定石材-->
    <form action="" class="form form-yd hidden">
        <div class="close-box">
            <img src="../images/CLOSE.png" class="close" alt=""/>
        </div>
        <h3 class="ydsc-form">预定石材</h3>
        <div class="ydsc-fm">
            <div class="form-div">
                <label for="name">姓名</label>
                <input type="text" id="name" name="name" placeholder="姓名"/>
            </div>
            <div class="form-div">
                <label for="tel-yd">联系电话</label>
                <input type="text" id="tel-yd" name="tel-yd" placeholder="请输入手机号"/>
            </div>
            <div class="form-div">
                <label for="num">数量</label>
                <input type="text" id="num" name="num" placeholder="数量"/>
            </div>
        </div>

        <div class="form-text">
                <label for="beizhu">备注</label>
                <textarea id="beizhu" name="beizhu" rows="4"></textarea>
        </div>
        <div class="form-text">
            <button type="reset" class="reset">取消</button>
            <button type="submit" class="sbm">确定</button>
        </div>

    </form>
    <!-- 预定量房-->
    <form action="" class="form form-yd hidden">
        <div class="close-box">
            <img src="../images/CLOSE.png" class="close" alt=""/>
        </div>
        <h3 class="ydsc-form">预定量房</h3>
        <div class="ydsc-fm">
            <div class="form-div">
                <label for="name">姓名</label>
                <input type="text" id="name" name="name" placeholder="姓名"/>
            </div>
            <div class="form-div">
                <label for="tel-yd">联系电话</label>
                <input type="text" id="tel-yd" name="tel-yd" placeholder="请输入手机号"/>
            </div>
            <div class="form-div">
                <label for="type">装修类型</label>
                <select name="type" id="type">
                    <option value="jz">家装</option>
                    <option value="bs">别墅</option>
                    <option value="pt">普通住宅</option>
                </select>
            </div>
            <div class="form-div">
                <label for="dax">装修大小</label>
                <input type="text" id="dax" name="dax" placeholder="装修大小（㎡）"/>
            </div>
        </div>

        <div class="form-text">
            <label for="beizhu">备注</label>
            <textarea id="beizhu" name="beizhu" rows="4"></textarea>
        </div>
        <div class="form-text">
            <button type="reset" class="reset">取消</button>
            <button type="submit" class="sbm">确定</button>
        </div>

    </form>
    <!-- 预约加工-->
    <form action="" class="form form-yd">
        <div class="close-box">
            <img src="../images/CLOSE.png" class="close" alt=""/>
        </div>
        <h3 class="ydsc-form">预定量房</h3>
        <div class="ydsc-fm">
            <div class="form-div">
                <label for="name">姓名</label>
                <input type="text" id="name" name="name" placeholder="姓名"/>
            </div>
            <div class="form-div">
                <label for="tel-yd">联系电话</label>
                <input type="text" id="tel-yd" name="tel-yd" placeholder="请输入手机号"/>
            </div>
            <div class="form-div">
                <label for="jgnum">加工数量</label>
                <input type="text" id="jgnum" name="jgnum" placeholder="加工数量（㎡）"/>
            </div>
        </div>

        <div class="form-text">
            <label for="beizhu">备注</label>
            <textarea id="beizhu" name="beizhu" rows="4"></textarea>
        </div>
        <div class="form-text">
            <button type="reset" class="reset">取消</button>
            <button type="submit" class="sbm">确定</button>
        </div>

    </form>
</div>
<!--页面头部导航-->
<header class="overflow">
    <div class="float">
        <img src="../images/logo.png" alt=""/>
    </div>
    <div class="float header-rt">
        <span class="login">登录</span>&nbsp;&nbsp;|&nbsp;
        <span class="reg">注册</span>
        <span><img src="../images/phone.png" alt=""/>&nbsp;手机商城</span><br/>
        <div class="search-box">
            <input type="search" class="search" placeholder="请输入关键字"/><button class="searching">搜索</button>
        </div>
    </div>
</header>
<nav class="overflow">
    <ul>
        <li class="float navactive">首页</li>
        <li class="float">材料供应</li>
        <li class="float bg-jt">石材加工</li>
        <li class="float bg-jt">装修设计</li>
        <li class="float bg-jt">施工团队</li>
        <li class="float">会员中心</li>
    </ul>
</nav>
<!--网页主体-->
<section id="app">
    <div class="banner hidden">
        <img src="../images/banner.jpg" alt=""/>
    </div>
    <div class="main">
        <h5 class="h5">
            <img src="../images/mbx.png" alt=""/>&nbsp;>&nbsp;<a href="#">材料供应</a>
        </h5>
        <div class="overflow hidden">
            <!-- 侧边栏-->
            <div class="float sidebar">
                <ul>
                    <li class="sidebar-title">{{title}}</li>
                    <li class="active" @click="ss">全部</li>
                    <li @click="ss"  v-for="side in sidebar" >
                        {{side.text}}
                    </li>
                </ul>
            </div>
            <!-- 所有材料展示-->
            <div class="float DetailShow" v-if="!show">
                <div class="classify-box">
                    <h3 class="dh-h3">花岗岩
                        <img class="more" src="../images/more.png" alt=""/>
                    </h3>
                    <div class="overflow classify">
                        <ul>
                            <li>
                                <img src="../images/cailiao/1_02.png" alt=""/>
                                <span class="cl-name">新土耳其灰3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/2_01.png" alt=""/>
                                <span class="cl-name">卡西白</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/3_01.png" alt=""/>
                                <span class="cl-name">卡拉灰1</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/4_01.png" alt=""/>
                                <span class="cl-name">意大利蓝金沙2</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="classify-box">
                    <h3 class="dh-h3">大理石
                        <img class="more" src="../images/more.png" alt=""/>
                    </h3>
                    <div class="overflow classify">
                        <ul>
                            <li>
                                <img src="../images/cailiao/1_02.png" alt=""/>
                                <span class="cl-name">新土耳其灰3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/2_01.png" alt=""/>
                                <span class="cl-name">卡西白</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/3_01.png" alt=""/>
                                <span class="cl-name">卡拉灰1</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/4_01.png" alt=""/>
                                <span class="cl-name">意大利蓝金沙2</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="classify-box">
                    <h3 class="dh-h3">板岩
                        <img class="more" src="../images/more.png" alt=""/>
                    </h3>
                    <div class="overflow classify">
                        <ul>
                            <li>
                                <img src="../images/cailiao/1_02.png" alt=""/>
                                <span class="cl-name">新土耳其灰3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/2_01.png" alt=""/>
                                <span class="cl-name">卡西白</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/3_01.png" alt=""/>
                                <span class="cl-name">卡拉灰1</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/4_01.png" alt=""/>
                                <span class="cl-name">意大利蓝金沙2</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="classify-box">
                    <h3 class="dh-h3">砂岩
                        <img class="more" src="../images/more.png" alt=""/>
                    </h3>
                    <div class="overflow classify">
                        <ul>
                            <li>
                                <img src="../images/cailiao/1_02.png" alt=""/>
                                <span class="cl-name">新土耳其灰3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/2_01.png" alt=""/>
                                <span class="cl-name">卡西白</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/3_01.png" alt=""/>
                                <span class="cl-name">卡拉灰1</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/4_01.png" alt=""/>
                                <span class="cl-name">意大利蓝金沙2</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="classify-box">
                    <h3 class="dh-h3">人造石材
                        <img class="more" src="../images/more.png" alt=""/>
                    </h3>
                    <div class="overflow classify">
                        <ul>
                            <li>
                                <img src="../images/cailiao/1_02.png" alt=""/>
                                <span class="cl-name">新土耳其灰3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/2_01.png" alt=""/>
                                <span class="cl-name">卡西白</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/3_01.png" alt=""/>
                                <span class="cl-name">卡拉灰1</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/4_01.png" alt=""/>
                                <span class="cl-name">意大利蓝金沙2</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 材料分类-->
            <div class="float DetailShow" v-if="!show">
                <div class="classify-box">
                    <h3 class="dh-h3">花岗岩
                        <img class="more" src="../images/more.png" alt=""/>
                    </h3>
                    <div class="overflow classify">
                        <ul>
                            <li>
                                <img src="../images/cailiao/1_02.png" alt=""/>
                                <span class="cl-name">新土耳其灰3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/2_01.png" alt=""/>
                                <span class="cl-name">卡西白</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/3_01.png" alt=""/>
                                <span class="cl-name">卡拉灰1</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/4_01.png" alt=""/>
                                <span class="cl-name">意大利蓝金沙2</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                            <li>
                                <img src="../images/cailiao/5_01.png" alt=""/>
                                <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 商品详情-->
            <div class="float DetailShow" v-if="!show">
               <div class="detBox">
                   <div class="overflow">
                       <div class="detBox-lt float">
                           <img src="../images/det_03.jpg" alt=""/>
                           <div class="img-list">
                               <img src="../images/cailiao/1_02.png" alt=""/><img src="../images/cailiao/1_02.png" alt=""/><img src="../images/cailiao/1_02.png" alt=""/><img src="../images/cailiao/1_02.png" alt=""/>
                           </div>
                       </div>
                       <div class="detBox-rt float">
                           <h2>河南芝麻白火烧面</h2>
                           <span class="price-num">￥<span class="nump">5000</span></span>
                           <div class="data-shop">
                               <ul>
                                   <li>
                                       <span>规格型号</span>
                                       <span class="price"> 53211</span>
                                   </li>
                                   <li>
                                       <span>数量单位</span>
                                       <span class="price">6000平方</span>
                                   </li>
                                   <li>
                                       <span>产地</span>
                                       <span class="price">山东</span>
                                   </li>
                                   <li>
                                       <span>企业名称</span>
                                       <span class="price">河南共利石业</span>
                                   </li>
                               </ul>
                           </div>
                           <button class="ydsc">预定石材</button>
                       </div>
                   </div>

                   <div class="jiesh">
                       <h4>
                           产品介绍
                       </h4>
                       <p>
                           本公司主要生产天然花岗岩/603芝麻白，芝麻灰，黄锈石，泌阳红本厂自有矿山，锯厂，西安设有门面，产品销往全国各地，有大量的现货供应，主要有火烧板，抛光板，机刨板，异形板，荔枝面，剁斧面，路沿石等各种板材，量大从优。
                       </p>
                       <img src="../images/bann_06.jpg" alt=""/>
                   </div>
               </div>
            </div>
            <!-- 装潢团队-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox">
                    <div class="gs-box">
                        <div class="abox">
                            <img src="../images/gs/gs_03.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>杭州浩田装饰设计工程有限公司</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                        <div class="abox">
                            <img src="../images/gs/gs_06.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>杭州浩田装饰设计工程有限公司</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                        <div class="abox">
                            <img src="../images/gs/gs_08.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>杭州浩田装饰设计工程有限公司</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                        <div class="abox">
                            <img src="../images/gs/gs_10.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>杭州浩田装饰设计工程有限公司</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                        <div class="abox">
                            <img src="../images/gs/gs_12.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>杭州浩田装饰设计工程有限公司</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="pagination xuhao">
                        <a class="active" href="javascript:;">首页</a>
                        <a href="javascript:;">2</a>
                        <a href="javascript:;">3</a>
                        <a href="javascript:;">4</a>
                        <a href="javascript:;">5</a>
                        <a href="javascript:;">6</a>
                        <a href="javascript:;">7</a>
                        <a href="javascript:;">&gt;</a>
                        <a href="javascript:;">&gt;&gt;</a>
                    </div>
                </div>
            </div>
            <!-- 装潢团队详情/施工团队详情-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox">
                    <div class="abox">
                        <img src="../images/gs/gs_03.jpg" class="gs-banner" alt=""/>
                        <div class="gs-jsh">
                            <h3>杭州浩田装饰设计工程有限公司 <button>预定量房</button></h3>
                            <div class="dt-box">
                                <span class="bt">服务区域</span><span>滨江,拱墅,江干,上城,西湖,下城,余杭</span><br/>
                                <span class="bt">服务专长</span><span>家装,别墅,普通住宅</span><br/>
                                <span class="bt">承接价位</span><span>3-5万,5-8万,8-12万,12-18万,18-30万,30-100万,100万以上</span><br/>
                                <span class="bt">专长风格</span><span>现代,美式,欧美</span>
                            </div>
                        </div>
                    </div>
                    <p class="dt-p">
                        杭州宾格装饰设计工程有限公司将长期坚持以质量和居住性为首位，专业从事住宅、别墅、酒店、商铺、写字楼等装饰设计与施工的装饰装修公
                    司，具有专业家居装修资格。公司在以往的设计和施工中，积累了雄厚的品牌资产，形成了专业化，规模化，品牌化的竞争优势。
                        经历多年的拼搏，我公司在对装修方面积累了丰富的经验。在人才上，公司拥有一批富有高素质的专业设计人员，在杭州后现在设计上有独特的设计理念，在
                        装修上有一支技术过硬的施工队伍。
                    </p>
                    <div>
                        <h2>设计团队</h2>
                        <div class="overflow checkedlist-gs">
                            <ul>
                                <li class="float">
                                    <img src="../images/cai6.png" alt=""/>
                                    <span>咖啡网</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai5.png" alt=""/>
                                    <span>米白</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai4.png" alt=""/>
                                    <span>大花白</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai3.png" alt=""/>
                                    <span>灰麻</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai2.png" alt=""/>
                                    <span>红色</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai1.png" alt=""/>
                                    <span>金碧辉煌</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai4.png" alt=""/>
                                    <span>大花白</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai3.png" alt=""/>
                                    <span>灰麻</span><span class="zhiw">技术总监</span>
                                </li>
                                <li class="float"><img src="../images/cai2.png" alt=""/>
                                    <span>红色</span><span class="zhiw">技术总监</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <h2>在建工地</h2>
                        <div>
                            <ul class="overflow zjgd">
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_03.jpg" alt=""/>
                                    <span>任先生的新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_05.jpg" alt=""/>
                                    <span>蔡女士的新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_07.jpg" alt=""/>
                                    <span>郭小姐的新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_12.jpg" alt=""/>
                                    <span>刘大大的新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_13.jpg" alt=""/>
                                    <span>徐大大新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_14.jpg" alt=""/>
                                    <span>蔡先生的新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_14.jpg" alt=""/>
                                    <span>蔡先生的新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_13.jpg" alt=""/>
                                    <span>蔡先生的新家</span>
                                </li>
                                <li class="float">
                                    <img src="../images/zjgd/zjgd_07.jpg" alt=""/>
                                    <span>蔡先生的新家</span>
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- 装修案例/在建工地-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox">
                    <div>
                        <ul class="overflow zjgd">
                            <li class="float">
                                <img src="../images/zjgd/zjgd_03.jpg" alt=""/>
                                <span>任先生的新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_05.jpg" alt=""/>
                                <span>蔡女士的新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_07.jpg" alt=""/>
                                <span>郭小姐的新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_12.jpg" alt=""/>
                                <span>刘大大的新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_13.jpg" alt=""/>
                                <span>徐大大新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_14.jpg" alt=""/>
                                <span>蔡先生的新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_14.jpg" alt=""/>
                                <span>蔡先生的新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_13.jpg" alt=""/>
                                <span>蔡先生的新家</span>
                            </li>
                            <li class="float">
                                <img src="../images/zjgd/zjgd_07.jpg" alt=""/>
                                <span>蔡先生的新家</span>
                            </li>
                        </ul>
                    </div>
                    <div class="pagination xuhao">
                        <a class="active" href="javascript:;">首页</a>
                        <a href="javascript:;">2</a>
                        <a href="javascript:;">3</a>
                        <a href="javascript:;">4</a>
                        <a href="javascript:;">5</a>
                        <a href="javascript:;">6</a>
                        <a href="javascript:;">7</a>
                        <a href="javascript:;">&gt;</a>
                        <a href="javascript:;">&gt;&gt;</a>
                    </div>
                </div>
            </div>
            <!-- 装修案例详情/在建工地详情-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox anlidtl">
                    <h3>果岭金先生雅居</h3>
                    <p>很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批</p>
                    <p>很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批很好非常好，服务态度好，技术一流，没话说，厉害的一批</p>
                    <img src="../images/anli/anli_03.jpg" alt=""/>
                    <button>返回</button>
                </div>
            </div>
            <!-- 装修攻略-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox zxgl">
                    <div>
                        <ul class="overflow">
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                            <li class="float"><span>房子这样装修，电费能剩一半</span><time>04-26</time></li>
                        </ul>
                    </div>
                    <div class="pagination xuhao">
                        <a class="active" href="javascript:;">首页</a>
                        <a href="javascript:;">2</a>
                        <a href="javascript:;">3</a>
                        <a href="javascript:;">4</a>
                        <a href="javascript:;">5</a>
                        <a href="javascript:;">6</a>
                        <a href="javascript:;">7</a>
                        <a href="javascript:;">&gt;</a>
                        <a href="javascript:;">&gt;&gt;</a>
                    </div>
                </div>
            </div>
            <!-- 装修攻略详情-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox anlidtl">
                    <h3>签订装修合同注意事项</h3>
                    <div class="zhx-time">
                        <time>2015/04/7 10:54</time>发表
                    </div>
                    <div class="heton">
                        <h5>1.注意签合同的时机</h5>
                        <p>
                            业主在与装修公司签订合同前，应该是与装修公司把相关问题都已谈妥才能签的。小编建议您，在签订合同前，最好把价格，有关设计，材料问清楚。
                        </p>
                        <h5>2.确保装修公司手续齐全</h5>
                    </div>
                    <img src="../images/anli/anli_03.jpg" alt=""/>
                    <div class="heton">
                        <h5>1.注意签合同的时机</h5>
                        <p>
                            业主在与装修公司签订合同前，应该是与装修公司把相关问题都已谈妥才能签的。小编建议您，在签订合同前，最好把价格，有关设计，材料问清楚。
                        </p>
                        <h5>2.确保装修公司手续齐全</h5>
                    </div>
                    <button>返回</button>
                </div>
            </div>
            <!-- 加工厂房/施工团队-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox">
                    <div class="gs-box">
                        <div class="abox">
                            <img src="../images/gs/gs_03.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>杭州浩田加工厂</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                        <div class="abox">
                            <img src="../images/gs/gs_06.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>七彩石加工厂</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                        <div class="abox">
                            <img src="../images/gs/gs_08.jpg" class="gs-banner" alt=""/>
                            <div class="gs-jsh">
                                <h3>杭州红坡加工厂</h3>
                                <p>
                                    杭州鹏昂装饰工程有限公司是一家专业从事家居、别墅、办公楼、商铺、酒店的装饰设计及施工一条龙服务的知名装饰公司。公司麾下聚集一批多年一起打拼的...
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="pagination xuhao">
                        <a class="active" href="javascript:;">首页</a>
                        <a href="javascript:;">2</a>
                        <a href="javascript:;">3</a>
                        <a href="javascript:;">4</a>
                        <a href="javascript:;">5</a>
                        <a href="javascript:;">6</a>
                        <a href="javascript:;">7</a>
                        <a href="javascript:;">&gt;</a>
                        <a href="javascript:;">&gt;&gt;</a>
                    </div>
                </div>
            </div>
            <!-- 加工厂房详情-->
            <div class="float DetailShow" v-if="!show">
                <div class="detBox jiag">
                    <div class="abox">
                        <img src="../images/gs/gs_03.jpg" class="gs-banner" alt=""/>
                        <div class="gs-jsh">
                            <h3>杭州浩田装饰设计工程有限公司 <button>预约加工</button></h3>
                            <div class="dt-box">
                                <span class="bt">联系人</span><span>余海利</span><br/>
                                <span class="bt">手机</span><span>13223864688，18339603525</span><br/>
                                <span class="bt">电话</span><span>13223864688</span><br/>
                                <span class="bt">传真</span><span>0396-7995388</span><br/>
                                <span class="bt">地址</span><span>河南省泌阳县春水镇石材开发区</span>
                            </div>
                        </div>
                    </div>
                    <p class="dt-p">
                        杭州宾格装饰设计工程有限公司将长期坚持以质量和居住性为首位，专业从事住宅、别墅、酒店、商铺、写字楼等装饰设计与施工的装饰装修公
                        司，具有专业家居装修资格。公司在以往的设计和施工中，积累了雄厚的品牌资产，形成了专业化，规模化，品牌化的竞争优势。
                        经历多年的拼搏，我公司在对装修方面积累了丰富的经验。在人才上，公司拥有一批富有高素质的专业设计人员，在杭州后现在设计上有独特的设计理念，在
                        装修上有一支技术过硬的施工队伍。
                    </p>
                    <div class="classify-box">
                        <h3 class="dh-h3">产品介绍</h3>
                        <div class="overflow classify">
                            <ul>
                                <li>
                                    <img src="../images/cailiao/1_02.png" alt=""/>
                                    <span class="cl-name">新土耳其灰3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                                </li>
                                <li>
                                    <img src="../images/cailiao/2_01.png" alt=""/>
                                    <span class="cl-name">卡西白</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                                </li>
                                <li>
                                    <img src="../images/cailiao/3_01.png" alt=""/>
                                    <span class="cl-name">卡拉灰1</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                                </li>
                                <li>
                                    <img src="../images/cailiao/4_01.png" alt=""/>
                                    <span class="cl-name">意大利蓝金沙2</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                                </li>
                                <li>
                                    <img src="../images/cailiao/5_01.png" alt=""/>
                                    <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                                </li>
                                <li>
                                    <img src="../images/cailiao/5_01.png" alt=""/>
                                    <span class="cl-name">北极光3</span><br/>
                                <span class="price">
                                    ￥<span>5000</span>
                                </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 加工案例-->
            <div class="float DetailShow" v-if="!show">
                <div class="overflow classify">
                    <ul>
                        <li>
                            <img src="../images/cailiao/1_02.png" alt=""/>
                            <span class="cl-name">新土耳其灰3</span>
                        </li>
                        <li>
                            <img src="../images/cailiao/2_01.png" alt=""/>
                            <span class="cl-name">卡西白</span>
                        </li>
                        <li>
                            <img src="../images/cailiao/3_01.png" alt=""/>
                            <span class="cl-name">卡拉灰1</span>
                        </li>
                        <li>
                            <img src="../images/cailiao/4_01.png" alt=""/>
                            <span class="cl-name">意大利蓝金沙2</span>
                        </li>
                        <li>
                            <img src="../images/cailiao/5_01.png" alt=""/>
                            <span class="cl-name">北极光3</span>
                        </li>
                        <li>
                            <img src="../images/cailiao/5_01.png" alt=""/>
                            <span class="cl-name">北极光3</span>
                        </li>
                    </ul>
                </div>
                <div class="pagination xuhao">
                    <a class="active" href="javascript:;">首页</a>
                    <a href="javascript:;">2</a>
                    <a href="javascript:;">3</a>
                    <a href="javascript:;">4</a>
                    <a href="javascript:;">5</a>
                    <a href="javascript:;">6</a>
                    <a href="javascript:;">7</a>
                    <a href="javascript:;">&gt;</a>
                    <a href="javascript:;">&gt;&gt;</a>
                </div>
            </div>
            <!-- 加工案例介绍-->
            <div class="float DetailShow" v-if="show">
                <div class="detBox jgal">
                    <div class="abox">
                        <img src="../images/gs/gs_03.jpg" class="gs-banner" alt=""/>
                        <div class="gs-jsh">
                            <h3>芝麻型沿路石材</h3>
                            <div class="dt-box">
                                <span class="bt">产品类别</span><span>沿路石</span><br/>
                                <span class="bt">联系人</span><span>余海利</span><br/>
                                <span class="bt">手机号码</span><span>13223864688，18339603525</span>
                            </div>
                        </div>
                    </div>
                    <p class="dt-p">
                        杭州宾格装饰设计工程有限公司将长期坚持以质量和居住性为首位，专业从事住宅、别墅、酒店、商铺、写字楼等装饰设计与施工的装饰装修公
                        司，具有专业家居装修资格。公司在以往的设计和施工中，积累了雄厚的品牌资产，形成了专业化，规模化，品牌化的竞争优势。
                        经历多年的拼搏，我公司在对装修方面积累了丰富的经验。在人才上，公司拥有一批富有高素质的专业设计人员，在杭州后现在设计上有独特的设计理念，在
                        装修上有一支技术过硬的施工队伍。
                    </p>
                    <img src="../images/anli/anli_03.jpg" alt=""/>
                </div>
            </div>
        </div>
        <div class="">
            <ul class="overflow">
                <li class="float">石材材料</li>
                <li class="float">加工工厂</li>
                <li class="float">加工案例</li>
                <li class="float">装修团队</li>
                <li class="float">装修案例</li>
                <li class="float">装修攻略</li>
                <li class="float">施工团队</li>
                <li class="float">在建工地</li>
            </ul>
        </div>
    </div>
</section>
<footer>
    <div class="mulu ">
        <div class="footer-lists float">
            <div class="storng">首页</div>
            <div class="storng">材料供应</div>
            <div>
                <ul>
                    <li class="storng">石材加工</li>
                    <li>加工厂房</li>
                    <li>加工案例</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li class="storng">装修设计</li>
                    <li>装修团队</li>
                    <li>装修案例</li>
                    <li>装修攻略</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li class="storng">施工团队</li>
                    <li>施工团队</li>
                    <li v-link="{ path: '/foo/'}">在建工地</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li class="storng">会员中心</li>
                    <li>我的订单</li>
                </ul>
            </div>
        </div>
        <div class="contact float">
            <h4 class="storng">联系我们</h4>
            <span>21312312312321</span><br/>
            <span>2132131232131231221312</span>
        </div>
    </div>
    <div class="icp">
        版权所有：老石汇有限公司&nbsp;&nbsp;&nbsp;浙ICP备13009078号-1
    </div>
</footer>

</body>
</html>